<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择城市</title>
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/css/selectcity.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
</head>
<body>
  <!--引入导航栏-->
  <div th:replace="~{head/topbar::topBar}"></div>
    <div class="city_selection_section">
        <div>
          <div class="city_recommend c_b row hot-city">
            <div class="city_recommend_tit col-md-1 offset-md-1">
              热门城市
            </div>
            <ul class="city_recommend_list col-md-6">
              <li><a href="#">北京</a></li>
              <li><a href="#">上海</a></li>
              <li><a href="#">深圳</a></li>
              <li><a href="#">广州</a></li>
              <li><a href="#">杭州</a></li>
              <li><a href="#">南京</a></li>
            </ul>
          </div>
          <div class="row" id="search-box">
            <div>
              <div class="input-group animate__animated animate__fadeInUp">
                <input id="search-input" type="text" class="form-control" placeholder="请输入城市名">
                <span class="input-group-btn">
                  <a href="#"><button id="search-button" class="btn btn-success animate__animated animate__pulse"
                    type="button">搜索城市</button></a>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="city_recommend">
          <div class="city-item VIEWDATA">

            <div class="city_list_section">
              <ul class="city_list_ul">
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>A</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">安徽</div>
                      <ul>
                        <li><a href="">安庆</a></li>
                        <li><a href="#">滁州</a></li>
                        <li><a href="#">合肥</a></li>
                        <li><a href="#">马鞍山</a></li>
                        <li><a href="#">芜湖</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>B</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">北京</div>
                      <ul>
                        <li><a href="#">北京</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>C</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">重庆</div>
                      <ul>
                        <li><a href="#">重庆</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>F</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">福建</div>
                      <ul>
                        <li><a href="#">福州</a></li>
                        <li><a href="#">泉州</a></li>
                        <li><a href="#">厦门</a></li>
                        <li><a href="#">漳州</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>G</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">广东</div>
                      <ul>
                        <li><a href="#">东莞</a></li>
                        <li><a href="#">佛山</a></li>
                        <li><a href="#">广州</a></li>
                        <li><a href="#">惠州</a></li>
                        <li><a href="#">江门</a></li>
                        <li><a href="#">清远</a></li>
                        <li><a href="#">深圳</a></li>
                        <li><a href="#">珠海</a></li>
                        <li><a href="#">湛江</a></li>
                        <li><a href="#">中山</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">广西</div>
                      <ul>
                        <li><a href="#">北海</a></li>
                        <li><a href="#">防城港</a></li>
                        <li><a href="#">桂林</a></li>
                        <li><a href="#">柳州</a></li>
                        <li><a href="#">南宁</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">甘肃</div>
                      <ul>
                        <li><a href="#">兰州</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">贵州</div>
                      <ul>
                        <li><a href="#">贵阳</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>H</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">河北</div>
                      <ul>
                        <li><a href="#">保定</a></li>
                        <li><a href="#">廊坊</a></li>
                        <li><a href="#">秦皇岛</a></li>
                        <li><a href="#">石家庄</a></li>
                        <li><a href="#">唐山</a></li>
                        <li><a href="#">张家口</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">海南</div>
                      <ul>
                        <li><a href="#">保亭</a></li>
                        <li><a href="#">澄迈</a></li>
                        <li><a href="#">儋州</a></li>
                        <li><a href="#">海口</a></li>
                        <li><a href="#">临高</a></li>
                        <li><a href="#">乐东</a></li>
                        <li><a href="#">陵水</a></li>
                        <li><a href="#">琼海</a></li>
                        <li><a href="#">三亚</a></li>
                        <li><a href="#">五指山</a></li>
                        <li><a href="#">文昌</a></li>
                        <li><a href="#">万宁</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">湖南</div>
                      <ul>
                        <li><a href="#">长沙</a></li>
                        <li><a href="#">常德</a></li>
                        <li><a href="#">岳阳</a></li>
                        <li><a href="#">株洲</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">河南</div>
                      <ul>
                        <li><a href="#">开封</a></li>
                        <li><a href="#">洛阳</a></li>
                        <li><a href="#">三门峡</a></li>
                        <li><a href="#">新乡</a></li>
                        <li><a href="#">许昌</a></li>
                        <li><a href="#">郑州</a></li>
                        <li><a href="#">周口</a></li>
                        <li><a href="#">驻马店</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">湖北</div>
                      <ul>
                        <li><a href="#">鄂州</a></li>
                        <li><a href="#">黄石</a></li>
                        <li><a href="#">武汉</a></li>
                        <li><a href="#">襄阳</a></li>
                        <li><a href="#">宜昌</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">黑龙江</div>
                      <ul>
                        <li><a href="#">哈尔滨</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>J</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">江西</div>
                      <ul>
                        <li><a href="#">赣州</a></li>
                        <li><a href="#">九江</a></li>
                        <li><a href="#">吉安</a></li>
                        <li><a href="#">南昌</a></li>
                        <li><a href="#">上饶</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">江苏</div>
                      <ul>
                        <li><a href="#">常州</a></li>
                        <li><a href="#">海门</a></li>
                        <li><a href="#">淮安</a></li>
                        <li><a href="#">江阴</a></li>
                        <li><a href="#">昆山</a></li>
                        <li><a href="#">南京</a></li>
                        <li><a href="#">南通</a></li>
                        <li><a href="#">苏州</a></li>
                        <li><a href="#">无锡</a></li>
                        <li><a href="#">徐州</a></li>
                        <li><a href="#">盐城</a></li>
                        <li><a href="#">镇江</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">吉林</div>
                      <ul>
                        <li><a href="#">长春</a></li>
                        <li><a href="#">吉林</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>L</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">辽宁</div>
                      <ul>
                        <li><a href="#">大连</a></li>
                        <li><a href="#">丹东</a></li>
                        <li><a href="#">沈阳</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>N</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">内蒙古</div>
                      <ul>
                        <li><a href="#">包头</a></li>
                        <li><a href="#">赤峰</a></li>
                        <li><a href="#">呼和浩特</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">宁夏</div>
                      <ul>
                        <li><a href="#">银川</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>S</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">山东</div>
                      <ul>
                        <li><a href="#">菏泽</a></li>
                        <li><a href="#">济南</a></li>
                        <li><a href="#">济宁</a></li>
                        <li><a href="#">临沂</a></li>
                        <li><a href="#">青岛</a></li>
                        <li><a href="#">泰安</a></li>
                        <li><a href="#">潍坊</a></li>
                        <li><a href="#">威海</a></li>
                        <li><a href="#">烟台</a></li>
                        <li><a href="#">淄博</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">四川</div>
                      <ul>
                        <li><a href="#">巴中</a></li>
                        <li><a href="#">成都</a></li>
                        <li><a href="#">德阳</a></li>
                        <li><a href="#">达州</a></li>
                        <li><a href="#">广元</a></li>
                        <li><a href="#">乐山</a></li>
                        <li><a href="#">凉山</a></li>
                        <li><a href="#">绵阳</a></li>
                        <li><a href="#">眉山</a></li>
                        <li><a href="#">南充</a></li>
                        <li><a href="#">遂宁</a></li>
                        <li><a href="#">宜宾</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">陕西</div>
                      <ul>
                        <li><a href="#">宝鸡</a></li>
                        <li><a href="#">汉中</a></li>
                        <li><a href="#">西安</a></li>
                        <li><a href="#">咸阳</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">山西</div>
                      <ul>
                        <li><a href="#">晋中</a></li>
                        <li><a href="#">太原</a></li>
                      </ul>
                    </div>
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">上海</div>
                      <ul>
                        <li><a href="#">上海</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>T</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">天津</div>
                      <ul>
                        <li><a href="#">天津</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>X</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">新疆</div>
                      <ul>
                        <li><a href="#">乌鲁木齐</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>Y</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">云南</div>
                      <ul>
                        <li><a href="#">大理</a></li>
                        <li><a href="#">昆明</a></li>
                        <li><a href="#">西双版纳</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
                <li class="city_list_li city_list_li_selected">
                  <div class="city_firstletter">
                    <span>Z</span>
                    <i></i>
                  </div>
                  <div class="city_list">
                    <div class="city_province">
                      <i></i>
                      <div class="city_list_tit c_b">浙江</div>
                      <ul>
                        <li><a href="#">杭州</a></li>
                        <li><a href="#">湖州</a></li>
                        <li><a href="#">嘉兴</a></li>
                        <li><a href="#">金华</a></li>
                        <li><a href="#">宁波</a></li>
                        <li><a href="#">衢州</a></li>
                        <li><a href="#">绍兴</a></li>
                        <li><a href="#">台州</a></li>
                        <li><a href="#">温州</a></li>
                        <li><a href="#">义乌</a></li>
                      </ul>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
      <script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
</body>
</html>
